<template>
  <div class="discount">
    <!-- 优惠信息 -->
    <div class="discount-text">
      <span :style="{background: '#'+InfoData[0].icon_color}">{{InfoData[0].icon_name}}</span>
      <span class="reduce">{{InfoData[0].description}}</span>
    </div>
    <!-- 优惠数量 -->
    <div class="discount-count" @click="isShowMask=true">
      {{ InfoData.length }}个优惠
      <i class="fa fa-caret-down"></i>
    </div>

    <transition name="fade">
      <div class="discount-detail" v-show="isShowMask">
        <div class="discount-info">
          <h2>优惠活动</h2>
          <i class="fa fa-remove" @click="isShowMask=false"></i>
          <ul v-for="(item,index) in InfoData" :key="index">
            <li>
              <i class="discount-icon" :style="{background: '#'+item.icon_color}">{{ item.icon_name }}</i>
              <span>{{ item.description }}</span>
            </li>
          </ul>
        </div>

      </div>
    </transition>

  </div>
</template>

<script>

export default {
  name: 'MyDiscount',
  props: {
    InfoData: Array
  },
  data() {
    return {
      isShowMask: false
    }
  }
}
</script>

<style lang="less" scoped>
.discount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 0 0 30px;
  .discount-text {
    font-size: 12px;
    display: flex;
    align-items: center;
    span {
      color: #fff;
    }
    .reduce {
      margin-left: 10px;
      color: #333;
    }
  }
  .discount-count {
    font-size: 12px;
    color: #333;
    margin-right: 30px;
  }
  .discount-detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    .discount-info {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding-bottom: 100px;
      .fa-remove {
        position: absolute;
        top: 5px;
        right: 11px;
      }
      h2 {
        text-align: center;
        font-size: 18px;
        padding: 15px 0;
      }
      ul {
        li {
          padding: 5px 20px;
          i {
            font-style: inherit;
            color: #fff;
            font-size: 14px;
            margin-right: 8px;
            padding: 0 5px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
